<style lang="scss" scoped>
    .common-title{margin-bottom: 12px;}
    .offer-swiper {
        padding-left: 28px;
        margin-bottom: 196px;
        .slider-item {
            width: 320px;
            .link {
                display: block;
            }
            .offerImg {
                width: 320px;
                border-radius: 6px; /* no */
            }
            .desc {
                font-size: 14px;
                margin-top: 8px;
                padding-left: 7px;
            }
        }
    }
    .detail-wrap{
        .hotel-img{
            position: relative;
            img{
                width: 100%;
            }
            span{
                position: absolute;
                width: 40px;
                height: 38px;
                top: 0;
                right: 0;
                background: url("/static/swiper-icon.png") 50% 50% no-repeat;
            }
        }
        .detail-content{
            padding: 0 25px;
            margin-bottom: 20px;
            .title{
                font-size: 16px;
                margin: 20px 0 13px 0;
            }
            .desc{
                font-size: 12px;
                line-height: 18px;
                color: $fontColor;
            }
            .hotel-info{
                margin-top: 6px;
                display: flex;
                .info{
                    margin-top: 10px;
                    margin-bottom: 10px;
                    margin-right: 60px;
                    &:last-child{
                        padding: 0;
                        margin-right: 0;
                    }
                }
        
                .info-title{
                    font-size: 12px;
                    line-height: 20px;
                    color: $gray;
                }
                .info-content{
                    line-height: 24px;
                    font-size: 12px;
                }
            }
        }
        .place-list{
            margin-bottom: 36px;
            li.place-item {
                padding-left: 27px;
                height: 110px;
                .link{
                    display: block;
                    width: 100%;
                    height: 100%;
                    padding: 12px 0;
                    box-sizing: border-box;
                    .item{
                        display: flex;
                        .place-img{
                            width: 110px;
                        }
                        .item-info{
                            width: 200px;
                            margin-left: 10px;
                            background: url("/static/arrow-right.png") 99% 70% no-repeat;
                            .title{
                                margin-top: 5px;
                                .name {
                                    display: inline-block;
                                    vertical-align: bottom;
                                    max-width: 162px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    word-break: break-all;
                                    white-space: nowrap;
                                    font-size: 14px;
                                    line-height: 19px;
                                }
                                .pillar{
                                    font-size: 12px;
                                    margin-left: 6px;
                                }
                            }
                            .infos{
                                margin-top: 18px;
                                display: flex;
                                .info{
                                    margin-right: 30px;
                                    &:last-child{
                                        padding: 0;
                                        margin-right: 0;
                                    }
                                }
        
                                .info-title{
                                    font-size: 12px;
                                    line-height: 16px;
                                    color: $gray;
                                }
                                .info-content{
                                    line-height: 16px;
                                    font-size: 12px;
                                    margin-bottom: 5px;
                                }
                            }
                        }
                    }
                }
            }
        }
        #map{
            width: 320px;
            height: 114px;
            margin-left: 27px;
            border-radius: 6px;
            border: 1px solid #D8D8D8;
            box-sizing: border-box;
        }
        .address-info {
            padding: 0 34px;
            font-size: 12px;
            color: $fontColor;
            line-height: 19px;
            margin: 15px 0 48px 0;
        }
        .add-plan{
            position: fixed;
            right: 37px;
            bottom: 87px;
            z-index: 2;
            width: 54px;
            height: 54px;
            background: #ffffff url("/static/price-active.png") 50% 50% no-repeat;
            border-radius: 100%;
            box-shadow: 0 10px 30px 0 rgba(0,0,0,0.27);
        }
    }
    
</style>

<template>
    <div class="detail-wrap">
        <div class="hotel-img">
            <img src="/static/img.png">
            <span @click="toPlaceDetail"></span>
        </div>
        <div class="detail-content">
            <h2 class="title">{{detail.name}}</h2>
            <p class="desc">{{detail.desc}}</p>
            <div class="hotel-info">
                <div class="info">
                    <p class="info-content">{{ detail.area }} ㎡</p>
                    <p class="info-title">最大会场</p>
                </div>
                <div class="info">
                    <p class="info-content">{{ detail.num }}</p>
                    <p class="info-title">会议室数量</p>
                </div>
                <div class="info">
                    <p class="info-content">{{ detail.room }}</p>
                    <p class="info-title">客房总数</p>
                </div>
            </div>
        </div>
        <h2 class="common-title"><span>酒店场地</span></h2>
        <ul class="place-list">
            <li class="place-item" v-for="(item,i) in detail.places" :keys="i">
                <router-link :to="{path: '/'}" class="link">
                    <div class="item">
                        <div class="place-img">
                            <img :src="item.imgUrl">
                        </div>
                        <div class="item-info">
                            <div class="title">
                                <span class="name">
                                    {{ item.name }}
                                </span>
                                <span class="pillar">{{ item.pillar }}</span>
                            </div>
                            <div class="infos">
                                <div class="info">
                                    <p class="info-content">{{ item.area }}㎡</p>
                                    <p class="info-title">面积</p>
                                </div>
                                <div class="info">
                                    <p class="info-content">{{ item.height }}</p>
                                    <p class="info-title">层高</p>
                                </div>
                                <div class="info">
                                    <p class="info-content">{{ item.num }}</p>
                                    <p class="info-title">最大容纳</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
        <h2 class="common-title"><span>到达指引</span></h2>
        <div id="map"></div>
        <div class="address-info">
            <p>距离市中心：1.56 km</p>
            <p>距离上海火车站：3.70 km</p>
        </div>
        <h2 class="common-title"><span>精选优惠</span></h2>
        <swiper class="offer-swiper" ref="offer-swiper" :options="offerSwiper">
            <swiper-slide v-for="(item,i) in offer" class="slider-item" :key="i">
                <router-link :to="{path:''}" class="link">
                    <img :src="item.imgurl" class="offerImg">
                    <p class="desc">{{ item.desc }}</p>
                </router-link>
            </swiper-slide>
        </swiper>
        
        <!--加入询价-->
        <div class="add-plan"></div>
        <footer-component activeItem="query"></footer-component>
    </div>
</template>

<script>
    import FooterComponent from '@/views/footer'
    export default {
        components: {
            FooterComponent
        },
        computed: {
        
        },
        
        filters: {},
        data() {
            return {
                offerSwiper: {
                    slidesPerView: 'auto',
                    spaceBetween: 18,
                    pagination: {
                        clickable: true
                    }
                },
                offer: [
                    {
                        imgurl: '/static/offer.png',
                        id: 1,
                        link: 'xxx',
                        desc: '三代同行，有福齐享'
                    },
                    {
                        imgurl: '/static/offer.png',
                        id: 2,
                        link: 'xxx',
                        desc: '三代同行，有福齐享2'
                    },
                    {
                        imgurl: '/static/offer.png',
                        id: 3,
                        link: 'xxx',
                        desc: '三代同行，有福齐享3'
                    }
                ],
                detail: {
                	name: '上海外滩华尔道夫酒店',
                    desc: '上海外滩华尔道夫酒店坐拥举世闻名的上海外滩核心地带，距南京路、豫园、人民广场举步之遥，交通便利。酒店建筑风格端庄典雅，中西合璧，既蕴藏着富贵华丽的韵律，又洋溢着二十一世纪的现代气息。',
                    area: 157,
                    num: 470,
                    room: 260,
                    address: '上海市黄浦区中山东一路2号',
                    places: [
                        {
                        	id: 1,
                            imgUrl: '/static/img2.png',
                            name: '上海总会厅',
                            pillar: '无柱',
                            area: 420,
                            height: 5.1,
                            num: 550
                        },
                        {
                            id: 2,
                            imgUrl: '/static/img2.png',
                            name: '上海总上海总会厅上海总会厅会厅',
                            pillar: '无柱',
                            area: 420,
                            height: 5.1,
                            num: 550
                        }
                    ]
                },
            };
        },
        mounted() {
        	// 获取数据后调用 生成地图
            this.createMap()
        },
        methods: {
            addItem(id){
            
            },
            
            //去图片页
            toPlaceDetail(){
            	this.$router.push({
                    name: 'placeImg',
                    params: {
                    	id: this.$route.params.id
                    }
                })
            },
            createMap(){
                // 百度地图API功能    此处是有地址 没坐标写法
                var map = new BMap.Map('map', {
                    enableMapClick: false
                });
                // 创建地址解析器实例
                var myGeo = new BMap.Geocoder();
                
                // 将地址解析结果显示在地图上,并调整地图视野
                myGeo.getPoint(this.detail.address, function (point) {
                    if (point) {
                        map.centerAndZoom(point, 15);
                        var myIcon = new BMap.Icon("/static/location.png", new BMap.Size(18,
                            24));
                        var marker = new BMap.Marker(point, {
                            icon: myIcon
                        }); // 创建标注
                        map.addOverlay(marker); // 将标注添加到地图中
            
                    } else {
                        alert("您选择地址没有解析到结果!");
                    }
                }, "上海市");
                
                map.setMapStyle({
                    style: 'grayscale'
                });
            }
        }
    };
</script>

